<template>
  <PageContainer>
    <view class="container">
      <InvitationRankingMain
        :activityId="activityId"
        :role-type="RoleType.USER"
      ></InvitationRankingMain>
      <TButtonGroup>
        <TButton
          class="gutter-btn"
          type="none"
          text="我带来的人"
          @click="toDetail"
          :customStyle="{
            borderRadius: '44rpx',
            border: ' 2rpx solid  #C8CACC',
            background: '#FFF',
          }"
        />
        <TButton
          class="gutter-btn"
          type="none"
          text="邀约好友"
          :customStyle="{
            borderRadius: '44rpx',
            color: '#FFF',
            background: '#EA5E0E',
          }"
          @click="showSharePopup = true"
        />
      </TButtonGroup>
      <CustomShare
        v-if="getActivityShareCache"
        v-model:visible="showSharePopup"
        @register="handleCustomShareRegister"
      />
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import InvitationRankingMain from '../../components/InvitationRankingMain/index.vue';
  import { ref } from 'vue';
  import { RoleType } from '@/enums/publicModuleEnum';
  import { navigateTo, onLoad } from '@/router';
  import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
  import CustomShare from '@/components/CustomShare/index.vue';
  import { useCustomShare } from '@/components/CustomShare/hooks/useCustomShare';
  import { useActivityStore } from '@/store/modules/activity';
  import { createMiniCode } from '@/utils/dynamicConfig';
  import { getActivityPosterData } from '../../utils';

  const { getActivityShareCache } = useActivityStore();

  const [
    register,
    {
      setWxShareOptions,
      setShareLogId,
      setPosterDrawData,
      setShareTimelineContent,
      setInternalLinkOptions,
    },
  ] = useCustomShare({
    buttons: {
      share: true,
      poster: true,
      copyLink: true,
      insertOffiaccount: true,
      offiaccount: true,
    },
    disableds: {
      shortLink: true,
    },
  });

  const activityId = ref<number>();
  onLoad<'activityDetailInvitationRanking'>(async (op) => {
    activityId.value = op.activityId;
  });

  const toDetail = () => {
    navigateTo({
      name: 'activityDetailInvitationRankingDetail',
      options: {
        activityId: activityId.value!,
      },
    });
  };

  const showSharePopup = ref(false);
  async function handleCustomShareRegister(e: any) {
    register(e);
    if (getActivityShareCache) {
      const { wxShareOptions, shareLogId, shareTimelineContent, activeityData } =
        getActivityShareCache;
      setInternalLinkOptions({
        name: 'activityDetails',
        options: { id: activeityData.id },
      });
      setWxShareOptions(wxShareOptions);
      setShareLogId(shareLogId);
      setShareTimelineContent(shareTimelineContent);
      const codeImg = await createMiniCode({ shareLogId });
      const posterData = getActivityPosterData(activeityData, codeImg);
      await setPosterDrawData(posterData);
    }
  }

  onShareAppMessage(() => ({}));
  onShareTimeline(() => ({}));
</script>

<style lang="scss" scoped>
  .container {
    padding-bottom: 128rpx;
    background: #fff;
  }
</style>
